<template>
  <div class="appointment-sign">
    <el-card>
      <h2>预约签到</h2>
      <el-form :model="form" label-width="80px">
        <el-form-item label="预约码">
          <el-input v-model="form.code" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="onSign">签到</el-button>
        </el-form-item>
      </el-form>
      <el-alert v-if="msg" :title="msg" type="success" show-icon style="margin-top:10px;" />
    </el-card>
  </div>
</template>
<script>
import api from '@/api';
export default {
  data() {
    return {
      form: { code: '' },
      msg: '',
      loading: false
    };
  },
  methods: {
    async onSign() {
      if (!this.form.code) {
        this.msg = '请输入预约码';
        return;
      }
      this.loading = true;
      try {
        const res = await api.post('/appointment/sign', { code: this.form.code });
        if (res && res.success) {
          this.msg = '签到成功！';
          this.form.code = '';
        } else {
          this.msg = res && res.msg ? res.msg : '签到失败';
        }
      } catch (e) {
        this.msg = '签到失败';
      }
      this.loading = false;
    }
  }
};
</script>
<style scoped>
.appointment-sign { max-width: 400px; margin: 40px auto; }
</style>
